<template>
  <el-row class="tac">
    <el-col :span="4">
      <el-tree
        :data="menuData"
        :props="defaultProps"
        :highlight-current="true"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <el-icon>
            <component :is="data.icon" />
          </el-icon>
          <span class="custom-tree-node">{{ data.label }}</span>
        </template>
      </el-tree>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import { Folder, Document } from '@element-plus/icons-vue' // 导入图标组件

// 树形结构数据
const menuData = ref([
  {
    label: '智慧城市场景',
    icon: Folder, // 使用导入的图标组件
    children: [
      { label: '企业信息化', icon: Document },
      { label: '基础设施', icon: Document },
      { label: '数据中台', icon: Document },
      { label: '数据要素', icon: Document },
      { label: '数字经济', icon: Document },
      { label: '系统集成服务', icon: Document },
      { label: '其他', icon: Document },
    ],
  },
  // 可以添加更多的一级菜单
  {
    label: '其他分类',
    icon: Folder,
    children: [
      { label: '子项1', icon: Document, children: [{ label: '子项1-1', icon: Document }] },
      { label: '子项2', icon: Document },
    ],
  },
])

// 树形结构的配置
const defaultProps = ref({
  children: 'children', // 子节点的字段名
  label: 'label', // 节点显示的字段名
})

// 点击节点的回调函数
const handleNodeClick = (data) => {
  console.log('点击的节点:', data)
}
</script>

<style scoped>
::v-deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: var(--el-color-primary);
  color: var(--el-color-primary);
}
::v-deep(.el-tree-node.is-current .el-tree-node__content > .el-tree-node__expand-icon) {
  color: #000;
}

.tac {
  width: 100%;
}

.el-tree {
  width: 100%;
  background-color: #f5f7fa; /* 背景色 */
  border-radius: 4px; /* 圆角 */
  padding: 10px; /* 内边距 */
}

.el-tree-node__content {
  height: 40px; /* 节点高度 */
  line-height: 40px; /* 文字垂直居中 */
  display: flex;
  align-items: center; /* 图标和文字垂直居中 */
}

.custom-tree-node {
  margin-left: 10px; /* 图标和文字之间的间距 */
}
</style>
